import { View, StyleSheet, Text } from "react-native";
import { Image } from "expo-image";
import {
  VictoryAxis,
  VictoryBar,
  VictoryChart,
  VictoryLabel,
  VictoryLegend,
  VictoryPie,
  VictoryTheme,
  VictoryTooltip,
} from "victory-native";
const data = [
  { quarter: 1, earnings: 13000 },
  { quarter: 2, earnings: 16500 },
  { quarter: 3, earnings: 14250 },
  { quarter: 4, earnings: 19000 },
];
export default function Chart() {
  return (
    <View style={styles.container}>
      <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
        <Text>Jumlah</Text>
        <Image
          source={require("@/assets/images/listIcon.png")}
          style={{ height: 15, width: 20 }}
        />
      </View>
      <View style={{ flex: 1, justifyContent: "center" }}>
        <VictoryChart
          width={1000}
          height={1000}
          theme={VictoryTheme.clean}
          style={{
            parent: {
              flex: 1,
            },
          }}
        >
          <VictoryAxis
            style={{
              axis: { stroke: "none" },
              ticks: { stroke: "none" },
              tickLabels: { fill: "none" },
            }}
          />
          <VictoryAxis
            dependentAxis
            style={{
              axis: { stroke: "none" },
              ticks: { stroke: "none" },
              tickLabels: { fill: "none" },
            }}
          />
          <VictoryPie
            theme={VictoryTheme.clean}
            labelComponent={<VictoryTooltip />}
            data={[
              { x: "Cats", y: 70, lable: "Cats" },
              { x: "Dogs", y: 30, lable: "Dogs" },
            ]}
            labels={({ datum }) => datum.x}
            cornerRadius={20}
            startAngle={-6}
            innerRadius={300}
            style={{
              data: {
                fill: ({ datum }) =>
                  datum.x === "Cats" ? "#F9D56E" : "#EB744E",
                stroke: "white",
                strokeWidth: 2,
              },
              labels: {
                fontSize: 25,
                fill: "#000000",
                lineHeight: 30,
              },
            }}
          />
          <VictoryLabel
            textAnchor="middle"
            style={{ fontSize: 45 }}
            x={180}
            y={450}
            text="1.500"
          />
          <VictoryLegend
            x={125}
            y={1000}
            orientation="vertical"
            style={{
              labels: { fontSize: 70, fontWeight: "bold" },
              border: { stroke: "none" },
            }}
            data={[
              {
                name: "Dogs333",
                symbol: { fill: "tomato" },
              },
              {
                name: "Cats",
                symbol: { fill: "orange" },
              },
            ]}
          />
        </VictoryChart>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    borderRadius: 20,
    backgroundColor: "white",
    padding: 16,
    width: 145,
    height: 205,
  },
});
